<template>
  <div class="openlucky">
    <div class="Notice">
      <Notice></Notice>
      <swiperlisttwo></swiperlisttwo>
    </div>
    <div class="circle_bjOr" v-if="changeMase"></div>
    <div class="open-box">
      <div><img src="../assets/openbind-centbg1.png" /></div>
      <div v-if="Exhibition" class="Exhibition">
        <div class="title">{{ per }}%</div>
        <div class="cent">
          <div class="cent1">
            <div><img :src="luckDrawData.image" /></div>
            <div>{{ luckDrawData.degree }}</div>
            <div>
              <div class="intsd">{{ luckDrawData.skinName}}</div><br><img src="../assets/money-icon.png" /><span>
                {{
                luckDrawData.price
              }}</span>
            </div>
          </div>
          <div class="cent2">
            <div>
              <Slider :min="5" :max="75" v-model="per"></Slider>
            </div>
            <p>
              您有{{ per }}%的机会获得追梦的饰品，并追加额外获得一个随机饰品。
            </p>
          </div>
          <div class="cent3">
            <div><img src="../assets/open_licky_sj_icon.png" /></div>
            <p>随机道具</p>
          </div>
        </div>
        <div @click="start()" class="open_btn">
          <img src="../assets/money-icon2.png" /><span>{{
            ((luckDrawData.price * 1.054 * per) / 100).toFixed(2)
          }}</span
          >开始
        </div>
      </div>
      <div v-else class="Rolling-box">
        <img :src="pds.backgoundImgOpening" class="imgBgbox"/>
        <div>
          <Laofuji ref="mychild" :list="slots1" :positions="position-1"></Laofuji>
          <div class="centerline"><span></span><span></span></div>
        </div>
        <div class="circle-bj">
          <img class="img_icon" src="../assets/1.png" />
        </div>
      </div>
      <div class="tal_box">
        <div @click="get_tal(0)" :class="{ activ: ac_index == 0 }">
          历史掉落
        </div>
        <div @click="get_tal(1)" :class="{ activ: ac_index == 1 }">
          道具品质
        </div>
      </div>
      <div class="probability" v-if="ac_index == 0">
        <div>
          <span>平均概率 16%</span>
          <p class="p1">32%</p>
          <p class="p2">32%</p>
        </div>
        <div></div>
      </div>

      <!-- 中奖弹窗 -->
      <div class="pop-box" v-if="pop">
        <!-- 弹窗背景 -->
      </div>
      <transition name="mybox" style="width: 100%; height: 100%">
        <div class="pop" v-if="pop">
          <div class="pop_cent">
            <div class="text-box">
              <div>{{ result.skinName }} {{ result.price }}</div>
              <div class="prize_bg">
                <img :src="pds.backgoundImgOpened" class="prize_end">
                <img :src="result.image" />
              </div>
              <div class="pop-btn">
                <div @click="getknapsack(1)">放入背包</div>
                <div @click="getrecovery(boxIds)">
                  回收 <img src="../assets/money-icon.png" />
                  <span>{{ result.recoveryPrice }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div class="list_box">
      <ul class="history_list" v-if="ac_index == 0">
        <div>
          <p>掉落时间</p>
          <p>获得玩家</p>
          <p>概率</p>
          <p>道具</p>
          <p>金币</p>
        </div>
        <li
          :class="{ activ: item.isGet == 1 }"
          v-for="(item, index) in historylist"
          :key="index"
        >
          <div>{{ item.createTime }}</div>
          <div>
            <div><img src="../assets/hedar-icon1.png" /></div>
            {{ item.userName }}
          </div>
          <div>{{ item.probability }}%</div>
          <div>
            <div><img src="../assets/gun3.png" /></div>
            {{ item.skinName }}
          </div>
          <div>{{ item.money }}</div>
        </li>
        <span @click="get_add()" class="addloding"></span>
      </ul>
      <div class="quality_list" v-else>
        <div>
          <div
            @click="get_quality(index, item.id)"
            :key="index"
            :class="{ activ: qualityactiv == index }"
            v-for="(item, index) in qualityList"
          >
            <div>
              <p>{{ item.degree }}</p>
              <div><img :src="item.image" /></div>
            </div>
            <div>
              <span>{{ item.skinName }}</span
              ><img src="../assets/money-icon.png" />{{ item.price }}
            </div>
          </div>
        </div>
        <ul>
          <li
            :class="{ activ: item.isGet == 1 }"
            v-for="(item, index) in historylist.slice(0, 19)"
            :key="index"
          >
            <div><img :src="item.userImage" /></div>
            <div>{{ item.probability }}%</div>
            <div><img :src="item.skinImage" /></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "../../config/bus.js";
import swiperlisttwo from "../components/swiper-list-three.vue";
import Notice from "../components/notice.vue";
import Slider from "../components/slider.vue";
import Laofuji from "../components/laofuji.vue";
export default {
  components: {
    swiperlisttwo,
    Notice,
    Slider,
    Laofuji,
  },
  data() {
    return {
      num_Url01: false,
      width_: "50",
      ac_index: 1,
      pop: false,
      per: 5,
      Exhibition: true,
      slots1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 7, 8, 9, 4, 4, 5, 4, 7, 2, 6, 465, 4],
      position: 10,
      id: null,
      pageSize: 20,
      pageNum: 1,
      luckDrawData: [],
      qualityList: [],
      qualityactiv: "0",
      historylist: [],
      historyid: null,
      result: null,
      boxIds: null,
      changeMase: false,
      pds:'',
      pdsd:'',
    };
  },
  methods: {
    get_tal(e) {
      this.ac_index = e;
    },
    open_btn(e) {
      this.Exhibition = false;
    },
    start() {
      var token = window.localStorage.getItem("token");
      this.changeMase = true;
      if (token) {
        this.getopen_list();
      } else {
        Bus.$emit("get_login", event.target);
      }
      return;
    },
    getopen_list() {
      var animation = this.$store.state.user.animation;
      this.$api.post(
        "/api/decoration/openLuck",
        {
          itemId: this.historyid,
          drawRatio: this.per,
        },
        (r) => {
          this.position = r.data.resultId;
          this.boxIds = r.data.boxId;
          this.slots1 = r.data.images;
          this.result = r.data.result;
          this.pds = r.data;
          if (animation == 0) {
            this.getstart1();
          } else {
            this.num_Url01 = true;
            this.changeMase = true;
            this.pop = true;
          }
        }
      );
    },
    getstart1() {
      var that = this;
      this.Exhibition = false;
      setTimeout(function () {
        that.$refs.mychild.childFun();
      }, 100);
      setTimeout(function () {
        var ds = that.$store.state.Max;
        setTimeout(function () {
          that.Exhibition = true;
          this.num_Url01 = false;
          that.changeMase = true;
          that.pop = true;
        }, ds);
      }, 500);
    },
    getknapsack(e) {
      this.$api.post(
        "/api/blindBox/recovery",
        {
          boxId: e,
          type: 1,
        },
        (r) => {
          if (r.code == 200) {
            this.pop = false;
            this.changeMase = false;
          }
        }
      );
    },
    getlist(e) {
      this.pageNum = 1;
      this.get_details(e);
    },
    get_details(id) {
      this.$api.get(
        "/api/decoration/showLuckyItems",
        {
          id: id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        (r) => {
          if (r.code == 200) {
            this.luckDrawData = r.data[0];
            this.qualityList = r.data;
            this.historyid = r.data[0].id;
            this.get_history(r.data[0].id);
          }
        }
      );
    },
    get_quality(e, id) {
      this.pageNum = 1;
      this.qualityactiv = e;
      this.luckDrawData = this.qualityList[e];
      this.historyid = id;
      this.historylist = [];
      this.get_history(id);
    },
    get_history(id) {
      this.$api.get(
        "/api/decoration/showBoxHistory",
        {
          id: id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        (r) => {
          if (this.pageNum <= r.data.totalPages) {
            this.historylist = this.historylist.concat(r.data.content);
          }
        }
      );
    },
    get_add() {
      this.pageNum++;
      this.get_history(this.historyid);
    },
    getrecovery(e) {
      this.$api.post(
        "/api/blindBox/recovery",
        {
          boxId: e,
          type: 2,
        },
        (r) => {
          if (r.code == 200) {
            this.pop = false;
            this.changeMase = false;
            this.$confirm({
              type: "提示",
              time: "1",
              msg: "回收成功！",
            });
            var k = this.$store.state.user.money;
            var money = parseFloat(
              (k + parseFloat(this.result.recoveryPrice)).toFixed(2)
            );
            this.$store.commit("signin_money", money);
          }
        }
      );
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.getlist(this.id);
  },
};
</script>

<style scoped>
.addloding {
  background-image: url(../assets/jzgd-icon.png);
  background-size: 100% 100%;
  width: 174px;
  height: 35px;
  margin: 0 auto;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 20px;
  display: block;
}
.circle_bjOr {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 300vh;
  background: #000;
  opacity: 0.6;
  z-index: 9;
}
.imging {
  animation: myfirst 8s infinite linear;
}
@keyframes myfirst {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pop_cent .pop-btn {
  display: flex;
  justify-content: space-around;
  padding: 0 30px;
}
.pop_cent .pop-btn > div {
  width: 200px;
  height: 45px;
  line-height: 45px;
  background-size: 100% 100%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.pop_cent .pop-btn > div:first-child {
  width: 291px;
  height: 63px;
  background: #079c96;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.pop_cent .pop-btn > div:nth-child(2) {
  margin-left: 40px;
  width: 291px;
  height: 63px;
  background: #0399c6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.pop_cent .pop-btn > div:first-child img {
  margin-left: 10px;
  margin-right: 5px;
}
.pop_cent .pop-btn > div:first-child span {
  color: #ffa32a;
}
.pop_cent .text-box > div:first-child {
  color: #ffffff;
  font-size: 20px;
  margin-top: 15px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
}
.pop_cent .text-box > div:nth-child(2) {
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
}
.pop_cent .text-box > div:nth-child(2) img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80%;
  width: 58%;
  height: auto;
  transform: translate(-50%, -50%);
}
.pop_cent .text-box {
  position: absolute;
  top: 94px;
  left: 50%;
  width: 692px;
  margin-left: -290px;
}
.pop_cent {
  position: absolute;
  top: 0;
  left: 50%;
  width: 854px;
  margin-left: -427px;
  margin-top: -50px;
}
.pop-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(../assets/bg_cope.png) no-repeat;
  background-size: 133%;
  z-index: 9998;
}
.pop {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.img_icon {
  margin-top: -30px;
}
.prize_end{
  width:100%;
  position: absolute;
  top:0;
  left:0;
}
.prize_bg {
  width: 700px;
  height: 461px;
  background-size: 100%;
}
.quality_list ul li > div:nth-child(3) {
  width: 45px;
  height: 45px;
  margin: 34px auto 0;
  position: relative;
}
.quality_list ul li > div:nth-child(3) img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 45px;
  max-height: 45px;
  transform: translate(-50%, -50%);
}
.quality_list ul li > div:nth-child(2) {
  margin-top: 28px;
  font-size: 14px;
  color: #3881af;
}
.quality_list ul li > div:first-child {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px auto 0;
}
.quality_list ul li > div:first-child img {
  width: 100%;
  height: 100%;
}
.quality_list ul li {
  width: 61px;
  height: 170px;
  background-image: url(../assets/openluckyquality-list-bg.png);
  background-size: 100% 100%;
}
.quality_list ul .activ {
  background-image: url(../assets/openluckyquality-list-bgs.png);
}
.quality_list ul .activ > div:nth-child(2) {
  color: #f49d2a;
}
.quality_list ul {
  display: flex;
  margin-top: 38px;
  min-height: 170px;
}
.quality_list {
  padding: 36px 20px;
}
.quality_list > div {
  display: flex;
  flex-wrap: wrap;
}
.quality_list > div .activ {
  background-image: url(../assets/openluckuqualitys.png);
}
.quality_list > div > div {
  margin-right: 10px;
  width: 280px;
  height: 159px;
  background-image: url(../assets/openluckuquality.png);
  background-size: 100% 100%;
  margin-bottom: 15px;
  cursor: pointer;
}
.quality_list > div > div:nth-child(4n) {
  margin-right: 0;
}
.quality_list > div > div > div:first-child {
  display: flex;
  align-items: flex-end;
  height: 110px;
  padding-left: 20px;
  color: #ffffff;
}
.quality_list > div > div > div:first-child > div {
  width: 160px;
  height: 100px;
  margin-left: 10px;
  position: relative;
}
.quality_list > div > div > div:first-child > div img {
  position: absolute;
  bottom: 0;
  left: 50%;
  max-width: 160px;
  max-height: 100px;
  width: auto;
  height: auto;
  transform: translate(-50%, 0);
}
.quality_list > div > div > div:nth-child(2) {
  margin-top: 17px;
  display: flex;
  align-items: center;
  margin-left: 20px;
  color: #ffa32a;
  font-size: 16px;
}
.quality_list > div > div > div:nth-child(2) img {
  margin-right: 5px;
}
.quality_list > div > div > div:nth-child(2) span {
  color: #59c2fe;
  margin-right: 15px;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imgBgbox{
  width:700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.quality_list > div .activ > div:nth-child(2) span {
  color: #ffe095 !important;
}
.circle-bj {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100%;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
}
.mybox-leave-active,
.mybox-enter {
  transition: all 0.2s ease;
  transform: scale(0.2) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.mybox-leave,
.mybox-enter-active {
  transition: all 0.3s ease;
  transform: scale(1);
}
.img_icon {
  width: 100%;
  margin-top: -30px;
}
.history_list > li {
  width: 100%;
  height: 53px;
  background-color: #1f3342;
  display: flex;
  color: #59c2fe;
  font-size: 16px;
  line-height: 53px;
}
.history_list .activ > div:nth-child(3),
.history_list .activ > div:nth-child(4),
.history_list .activ > div:nth-child(5) {
  color: #ffa32a;
}
.history_list > li:nth-child(2n-1) {
  background-color: #1a2530;
}
.history_list > li > div:first-child {
  width: 260px;
}
.history_list > li > div:nth-child(2) {
  width: 260px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 60px;
}
.history_list > li > div:nth-child(2) > div {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 4px;
}
.history_list > li > div:nth-child(2) > div img {
  width: 100%;
  height: 100%;
}
.history_list > li > div:nth-child(3) {
  width: 220px;
}

.history_list > li > div:nth-child(4) {
  width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history_list > li > div:nth-child(4) > div {
  margin-right: 8px;
  width: 42px;
  height: 34px;
  position: relative;
}
.history_list > li > div:nth-child(4) > div img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 42px;
  max-height: 34px;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.history_list > li > div:nth-child(5) {
  width: 160px;
}
.history_list > div {
  width: 100%;
  height: 53px;
  background-color: #1f3750;
  display: flex;
  color: #59c2fe;
  font-size: 16px;
  line-height: 53px;
  margin-bottom: 5px;
}
.history_list > div > p:first-child {
  width: 260px;
}
.history_list > div > p:nth-child(2) {
  width: 260px;
}
.history_list > div > p:nth-child(3) {
  width: 220px;
}
.history_list > div > p:nth-child(4) {
  width: 290px;
}
.history_list > div > p:nth-child(5) {
  width: 160px;
}
.history_list {
  margin: 0 5px;
  width: 1190px;
  padding: 10px 0;
}
.list_box {
  margin: 0 auto;
  width: 1200px;
  background-color: #000000;
}
.probability {
  position: absolute;
  width: 1200px;
  left: 50%;
  bottom: 22px;
  display: flex;
  align-items: center;
  margin-left: -600px;
  justify-content: flex-end;
  color: #999999;
  font-size: 14px;
}
.probability > div:first-child {
  display: flex;
  align-items: center;
}
.probability > div:first-child .p1 {
  color: #ffa32a;
  position: relative;
  padding: 0 0 0 25px;
  margin-left: 20px;
}
.probability > div:first-child .p1::after {
  top: 0;
  left: 10px;
  bottom: 0;
  width: 5px;
  content: "";
  background-color: #ffa32a;
  position: absolute;
}
.probability > div:first-child .p2 {
  color: #59c2fe;
  position: relative;
  padding: 0 0 0 25px;
  margin-left: 20px;
}
.probability > div:first-child .p2::after {
  top: 0;
  left: 10px;
  bottom: 0;
  width: 5px;
  content: "";
  background-color: #59c2fe;
  position: absolute;
}
.tal_box {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
}
.tal_box > div {
  height: 36px;
  width: 125px;
  border-radius: 18px;
  line-height: 36px;
  border: 2px solid #333d49;
  font-size: 16px;
  color: #999999;
  margin: 0 26px;
  cursor: pointer;
}
.tal_box .activ {
  border: 2px solid #017bad;
  color: #ffffff;
}
.Notice {
  background: #12151b;
}
.openlucky {
  width: 100%;
  max-width: 2600px;
  margin: 0 auto;
  background-color: #161a22;
}
.open-box {
  background-image: radial-gradient(circle, #122537, #161a22);
  max-width: 100%;
  min-width: 1200px;
  height: 630px;
  margin: 0 auto;
  position: relative;
  padding-top: 64px;
}
.open-box .Exhibition {
  position: absolute;
  top: 50%;
  right: 50%;
  height: 460px;
  width: 1200px;
  margin-right: -600px;
  margin-top: -240px;
  padding-top: 80px;
}
.open-box .Rolling-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../assets/bg_cope.jpg) no-repeat;
  background-size: 130%;
  z-index: 9999;
}
.open-box .Rolling-box > div:first-child {
  padding: 30px 0;
  position: relative;
}
.open-box .Rolling-box .centerline {
  position: absolute;
  width: 2px;
  height: 100%;
  left: 50%;
  margin-left: -1px;
  bottom: 0;
  background-color: #59c2fe;
  z-index: 999999;
}
.open-box .Exhibition .title {
  color: #ffffff;
  font-size: 42px;
  font-weight: 400;
}
.open-box .Exhibition .cent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.open-box .Exhibition .cent1 > div:first-child {
  width: 220px;
  height: 170px;
  position: relative;
}
.open-box .Exhibition .cent1 > div:first-child img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 170px;
  transform: translate(-50%, -50%);
}
.open-box .Exhibition .cent1 > div:nth-child(2) {
  margin-top: 5px;
  color: #ffffff;
  font-size: 16px;
}
.open-box .Exhibition .cent1 > div:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #999;
  margin-top: 10px;
}
.intsd{
  width:150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.open-box .Exhibition .cent1 > div:nth-child(3) span {
  color: #ffa32a;
}
.open-box .Exhibition .cent1 > div:nth-child(3) img {
  margin: 0 5px 0 15px;
}
.open-box .Exhibition .cent2 {
  width: 600px;
  box-sizing: border-box;
  position: relative;
  padding-left: 15px;
  padding-top: 20px;
}
.open-box .Exhibition .cent2 p {
  margin-top: 25px;
  font-size: 14px;
  color: #6a93af;
}
.open-box .Exhibition .cent2 > div:first-child {
  height: 15px;
  width: 470px;
  /* margin:  0 auto; */
  position: absolute;
  left: -300px;
  padding-left: 370px;
  top: 0;
}
.open-box .Exhibition .cent3 {
  width: 230px;
}
.open-box .Exhibition .cent3 > div {
  width: 140px;
  height: 145px;
  margin: 0 auto;
}
.open-box .Exhibition .cent3 > p {
  margin-top: 10px;
  color: #999;
  font-size: 16px;
}
.open_btn {
  width: 270px;
  height: 56px;
  background-image: url(../assets/hbb-btn-bg.png);
  background-size: 100% 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 300;
  color: #ffffff;
  cursor: pointer;
}
.open_btn span {
  color: #ffa32a;
  font-size: 24px;
  margin-right: 15px;
  line-height: 24px;
  margin-left: 5px;
}
</style>
